<template>
<div class="newsinfo-contain">
  <!-- 标题 -->
  <h1 class="newsinfo-title">{{title}}</h1>
  <!-- 子标题 -->
  <p class="newsinfo-subtitle"><span>发表时间：{{add_time|dateFormat}}</span><span>点击次数：{{count+1}}次</span></p>
  <!-- 分割线 -->
  <hr/>
  <!-- 内容 -->
  <div class="newsinfo-content" v-html="content"></div>
  <!-- 3 评论子组件渲染 -->
  <comment-box :id="id"></comment-box>
</div>
</template>

<script>
import {Toast} from 'mint-ui'
//1 引入评论子组件comment
import comment from '../subcomponents/Comment.vue'
export default {
  data(){
    return {
      id:this.$route.params.id,//把上个路由组件传过来的参数给到本组件的data中，便于调用
      add_time:this.$route.params.add_time,//把上个路由组件传过来的参数给到本组件的data中，便于调用
      count:parseInt(this.$route.params.count),//把上个路由组件传过来的参数给到本组件的data中，便于调用
      title:this.$route.params.title,
      content:null,
    }
  },
  created(){
    this.getNewContent()
  },
  methods:{
    getNewContent(){
      this.$axios.get('/getnew/'+this.id).then(res=>{
        console.log(res.data.message)
       
        this.content=res.data.message.filter(item=>item.id=this.id)[0].content
      }).catch(err=>Toast('无法连接服务器'+err))
    }
  },
  components:{
    //2 挂载评论子组件comment
    'comment-box':comment,
  }
}
</script>

<style lang='scss'>
.newsinfo-contain{
  padding: 5px;
  .newsinfo-title{
    font-size: 16px;
    text-align: center;
    margin: 10px;
  }
  .newsinfo-subtitle{
    display: flex;
    justify-content: space-between;
  }
  .newsinfo-content{
    img{ /*注意，这样还是不能让图片自适应，必须把作用域socped去掉*/
      width: 100%;
      // height: 100%;
    }
  }
}
</style>